<template>
	<view>
		<!-- <view class="content"> -->
			<uni-collapse >
				<uni-search-bar @confirm="refresh" @clear="refresh" v-model="bisZhsqSnryXm" placeholder="请输入姓名" clearButton="always" cancelButton="none"></uni-search-bar>
			</uni-collapse>
			<scroll-view scroll-y="true">
				<view>
					<uni-list>
						<uni-list-item v-for="(item,index) in list" :key="item.bisZhsqId" @click="toForm(item)" clickable>
							<template v-slot:body>
								<view class="slot-box">
									<text class="slot-text slot-text-1">被护理人： {{ item.zhsq.bisZhsqSnryXm }}</text>
									<text class="slot-text slot-text-2">护理日期：{{ item.bisOrderHlrq }}</text>
									<text class="slot-text slot-text-3">护理时间：{{ item.bisOrderStartTime }}-{{ item.bisOrderEndTime }}</text>
								</view>
							</template>
							<template v-slot:footer>
								<view class="ItemFooter">
									{{item.bisZhsqSndj}}
								</view>
							</template>
						</uni-list-item>
						<uni-pagination 
							:total="this.page.totalElements" 
							:pageSize="this.pageReq.size" 
							@change="loadPaginationPage" />
					</uni-list>
				</view>
			</scroll-view>
			<!-- </view> -->
	</view>
</template>

<script lang="ts">
	import { route } from "@/route/Route"
	import { orderService } from '@/service/OrderService'
	export default {
		data() {
			return {
				// page:{
				// 	page: 0,
				// 	size: 10,
				// 	totalElements: 0,
				// 	blurry: ''
				// },
				// list: [],
				bisZhsqSnryXm: '',
				triggered: false,
				_freshing: false,
				list:[],
				pageReq:{
					page: 0,
					size: 6,
					sort: "bisOrderHlrq,DESC"
				},
				page:{
					content: [],
					empty: false,
					first: true,
					last: false,
					number: 0,
					numberOfElements: 2,
					pageable: {
						offset: 0,
						pageNumber: 0,
						pageSize: 10,
						paged: true,
						sort: {empty: true, sorted: false, unsorted: true},
						unpaged: false
					},
					size: 10,
					sort: {empty: true, sorted: false, unsorted: true},
					totalElements: 2,
					totalPages: 1
				},
				status:"",
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: "待护理"
			})
			
		},
		onShow() {
			// orderService.listCaregiver({bisOrderZt:'0'},(res)=>{
			// 	this.list = res
			// })
			console.log("onShow")
			this.refresh()
		},
		methods: {
			toForm(item){
				route.navigateTo({name:'nursingForm',parameter:{...item,editAble:true}})
			},
			refresh(){
				console.log(123)
				if (this._freshing) return;
				this._freshing = true;
				this.triggered = true;
				this.pageReq.page = 0;
				this.list = [];
				this.status = "more"
				this.loadPage()
				
			},
			loadPage(){
				this.list = []
				orderService.listCaregiver({...this.pageReq,bisZhsqSnryXm:this.bisZhsqSnryXm,bisOrderZts:['0','3']},(res)=>{
					this.page = res
					this.list = [...this.list,...this.page.content]
					this.triggered = false;
					this._freshing = false;
				})
			},
			loadPaginationPage(e){
				if(e.type === 'prev') {
					
					this.pageReq.page--
				} else {
					
					this.pageReq.page++
				}
				this.status = "loading"
				this.list = []
				orderService.listCaregiver({...this.pageReq,bisZhsqSnryXm:this.bisZhsqSnryXm,bisOrderZts:['0','3']},(res)=>{
					this.page = res
					this.list = [...this.list,...this.page.content]
					this.triggered = false;
					this._freshing = false;
				})
			},
		}
	}
</script>
<style lang="scss" scoped>

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 40rpx 40rpx;
	}

	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin-top: 30rpx;
	}

	.content-text {
		font-size: 28rpx;
		color: #666;
	}
	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: flex-start;
	}

	.slot-text {
		margin-right: 20rpx;
		font-size: 28rpx;
		color: $uni-text-color-grey;
	}
	.slot-text-1 {    
		font-size: 40rpx;
		color: $uni-text-color;
	}
	.slot-text-2 {
	}
	.slot-text-3 {
	}
	::v-deep.uni-list-item__container{
		justify-content: space-between;
	}
	::v-deep.uni-list-item__header{
		display: none;
	}
	.ItemFooter{
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 14px;
		color: $uni-text-color-grey;;
	}
</style>
